<template>
	<view>
		<!-- //头像 -->
		<view class="avatardiv">
			<view class="cu-avatar xl round avataradd" style="background-image:url(https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png);"></view>
		</view>
		<!-- //用户名 -->
		<view class="avatardiv">
			<view v-if="this.Authorization">{{name}}</view>
			<view v-show="nologin" @click="tologin">点击登录</view>
		</view>
		<!-- 六宫格 -->
		<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
			<view class="cu-item" @click="tixing" hover-class="heartBeat">
				<span class="icon iconfont" style="color: rgb(197, 155, 193);font-size: 25px;">&#xe614;</span>
				<text>我的资料</text>
			</view>
			<view class="cu-item" @click="lunched()" hover-class="heartBeat">
				<span class="icon iconfont" style="color: rgb(96, 186, 199);font-size: 25px;">&#xe612;</span>
				<text>我发布的</text>
			</view>
			<view class="cu-item" @click="tixing()" hover-class="heartBeat">
				<span class="icon iconfont" style="color: rgb(239, 109, 89);font-size: 25px;">&#xe630;</span>
				<text>人员管理</text>
			</view>
			<view class="cu-item" @click="took()" hover-class="heartBeat">
				<span class="icon iconfont" style="color: rgb(18, 150, 219);font-size: 25px;">&#xe602;</span>
				<text>我参与的</text>
			</view>
			<view class="cu-item" @click="tixing()" hover-class="heartBeat">
				<span class="icon iconfont" style="color: rgb(235, 160, 94);font-size: 25px;">&#xe60d;</span>
				<text>开心商城</text>
			</view>
			<view class="cu-item" @click="tochange()" hover-class="heartBeat">
				<span class="icon iconfont" style="color: rgb(239, 109, 89);font-size: 25px;">&#xe611;</span>
				<text>修改密码</text>
			</view>
		</view>
		<!-- 列表 -->
		<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
			<view class="cu-item" :class="menuArrow?'arrow':''">
				<view class="content" style="display: flex;align-items: center;">
					<span class="icon iconfont" 
					style="color: rgb(197, 155, 193);font-size: 25px;">
					&#xe60e;</span>
					<text class="text-grey" style="padding-left: 15px; font-size: 16px;">我要出租</text>
				</view>
			</view>
			<view class="cu-item" :class="menuArrow?'arrow':''">
				<view class="content" style="display: flex;align-items: center;">
					<span class="icon iconfont" 
					style="color: rgb(96, 186, 199);font-size: 25px;">
					&#xe60f;</span>
					<text class="text-grey" style="padding-left: 15px; font-size: 16px;" @click="tocollect">我的收藏</text>
				</view>
			</view>
			<view class="cu-item" :class="menuArrow?'arrow':''">
				<view class="content" style="display: flex;align-items: center;">
					<span class="icon iconfont" 
					style="color: rgb(239, 109, 89);font-size: 25px;">
					&#xe615;</span>
					<text class="text-grey" style="padding-left: 11.5px; font-size: 16px;" @click="totellme">我要建议</text>
				</view>
			</view>
			<view class="cu-item" :class="menuArrow?'arrow':''" @tap="showModal" data-target="DialogModal2">
				<view class="content" style="display: flex;align-items: center;">
					<span class="icon iconfont"
					style="color: rgb(109, 215, 127);;font-size: 25px;">
					&#xe607;</span>
					<text class="text-grey" style="padding-left: 15px; font-size: 16px;vertical-align: middle;">退出登录</text>
				</view>
			</view>
			
			<view class="cu-modal" :class="modalName=='DialogModal2'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">提醒</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						亲，确定要退出吗？
					</view>
					<view class="cu-bar bg-white">
						<view class="action margin-0 flex-sub text-green " @tap="hideModal">
							<view class="action margin-0 flex-sub text-green solid-right" @tap="hideModal">取消</view>
						</view>
						<view class="action margin-0 flex-sub  solid-left" style="color: red;" @tap="logout">确定</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 60px;text-align: center;margin-top:20px;">
			<view style="line-height: 1.8;">
				CDIO-1组&copy;版权所有
			</view>
			<view style="line-height: 1.8;">
				<a style="text-decoration: none;color: #000000;" href="http://www.miit.gov.cn/">备案号:苏ICP备19058910号</a>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				name:'',
				id:'',
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				Authorization: ''
			}
		},
		onLoad() {
			this.getCookies()
		},
		methods: {
			clearCookieall: function() {
			   var keys=document.cookie.match(/[^ =;]+(?=\=)/g);
			  if(keys) {
			    for (var i =  keys.length; i--;)
			      document.cookie=keys[i]+'=0;expires=' + new Date( 0).toUTCString()
				}
			},
			showModal(e) {
				if(this.Authorization) {
					this.modalName = e.currentTarget.dataset.target
				}else {
					let that = this
					uni.showToast({
						icon:'none',
					    title: '请先登录。',
					    duration: 1000
					})
					setTimeout(function(){ that.tologin() }, 1000);
				}
			},
			hideModal(e) {
				this.modalName = null
			},
			logout() {
				this.getCookies()
				let that = this
				uni.request({
				    url: 'http://101.37.15.60:8080/api/v1/logout', 
				    header: {
				        'Authorization': "Bearer " + that.Authorization
				    },
				    success: (res) => {
				        if(res.data.message == 'SUCCESS') {
							this.modalName = null
							that.tixing2('退出成功！')
						}
				    }
				});
				this.clearCookieall()
				setTimeout(function(){ that.tologin() }, 1500);
			},
			tocollect() {
				this.getCookies()
				if(this.Authorization){
					uni.navigateTo({
						url: './components/collection?userId='+this.id+'&Authorization='+this.Authorization,
					    success: res => {}
					});
				}else{
					uni.showToast({
						icon:'none',
					    title: '请先登录。',
					    duration: 1500
					})
					setTimeout(function(){ 
						uni.navigateTo({
							url: '../login/login',
						    success: res => {}
						});
					}, 1500);
				}
			},
			tochange() {
				this.getCookies()
				if(this.Authorization){
					uni.navigateTo({
						url: './components/changekey?id='+this.id,
					    success: res => {}
					});
				}else{
					uni.showToast({
						icon:'none',
					    title: '请先登录。',
					    duration: 1500
					})
					setTimeout(function(){ 
						uni.navigateTo({
							url: '../login/login',
						    success: res => {}
						});
					}, 1500);
				}
			},
			lunched() {
				this.getCookies()
				if(this.Authorization){
					uni.navigateTo({
						url: './components/lunched?id='+this.id,
					    success: res => {}
					});
				}else{
					uni.showToast({
						icon:'none',
					    title: '请先登录。',
					    duration: 1500
					})
					setTimeout(function(){ 
						uni.navigateTo({
							url: '../login/login',
						    success: res => {}
						});
					}, 1500);
				}
			},
			took() {
				this.getCookies()
				if(this.Authorization){
					uni.navigateTo({
						url: './components/took',
					    success: res => {}
					});
				}else{
					uni.showToast({
						icon:'none',
					    title: '请先登录。',
					    duration: 1500
					})
					setTimeout(function(){ 
						uni.navigateTo({
							url: '../login/login',
						    success: res => {}
						});
					}, 1500);
				}
			},
			tologin(){
				uni.reLaunch({
					url: '../login/login',
				    success: res => {}
				});
			},
			totellme(){
				this.getCookies()
				if(this.Authorization){
					uni.reLaunch({
						url: './components/tellme',
					    success: res => {}
					});
				}else{
					uni.showToast({
						icon:'none',
					    title: '请先登录。',
					    duration: 1500
					})
					setTimeout(function(){ 
						uni.navigateTo({
							url: '../login/login',
						    success: res => {}
						});
					}, 1500);
				}
			},
			tixing2(title) {
				uni.showToast({
				    title: title,
				    duration: 1000
				})
			},
			tixing() {
				uni.showToast({
					icon:'none',
				    title: '谢谢支持，还没上线。',
				    duration: 2000
				})
			},
			getCookies() {
			  if (document.cookie.length > 0) {
			    var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
			    for (var i = 0; i < arr.length; i++) {
			      var arr2 = arr[i].split("="); //再次切割
			      //判断查找相对应的值
			      if (arr2[0] == "name") {
			        this.name = arr2[1]; //保存到保存数据的地方
			      }else if(arr2[0] == "id") {
					  this.id = arr2[1]
				  }else if(arr2[0] == "Authorization") {
					  this.Authorization = arr2[1]
				  }
			    }
			  }
			},
			islog() {
				let that = this
				if (document.cookie.length > 0) {
				  var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
				  for (var i = 0; i < arr.length; i++) {
				    var arr2 = arr[i].split("="); //再次切割
				    //判断查找相对应的值
				    if(arr2[0] == "Authorization") {
						that.Authorization = arr2[1]
					}
				  }
				  if(that.Authorization == '' || that.Authorization == null) {
					  uni.showToast({
					  	icon:'none',
					      title: '请先登录。',
					      duration: 1000
					  })
					  setTimeout(function(){ that.tologin() }, 1000);
					  }
				}else {
					uni.showToast({
						icon:'none',
					    title: '请先登录。',
					    duration: 1000
					})
					setTimeout(function(){ that.tologin() }, 1000);
				}
			}
		},
		computed: {
			nologin() {
				if(this.Authorization) {
					return false
				}else{
					return true
				}	
			}
		}
	}
</script>

<style scoped>
	.avatardiv {
		text-align: center;
		padding-top: 10px;
	}
	.avataradd {
		border: #FFFFFF 1px solid;
	}
</style>
